<template>
<div style="margin-top: 4px; font-size: 12px; background-color: #fff; 
            display: flex;
            justify-content: space-between;
            align-items: center;">
        <div style="display: flex;align-items: center;">
            <el-icon
            style="cursor: pointer"
            @click="collapse"
            size="24"
            >
            <component :is="collapseBtnClass" />
            </el-icon>

            <!-- 面包屑 -->
            <el-breadcrumb separator="/" style=" margin: 16px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <transition name="el-fade-in">
                  <el-breadcrumb-item><a href="/">{{ currentPathName }}</a></el-breadcrumb-item>
                </transition>
            </el-breadcrumb>
        </div>
        

        <div class="toolbar" style="font-size: 20px;margin-right: 35px;">
                    <el-dropdown style="    font-size: 20px;">
                    <span class="el-dropdown-link">
                        <!-- 用户头像 -->
                        <img :src="user.avatarUrl" alt=""
                        style="width: 34px; border-radius: 50%; 
                        position: relative; top: 10px; right: 5px">
                    {{mUser.account}}
                    <el-icon><ArrowDown /></el-icon>
                    </span>
                    <template #dropdown >
                            <el-dropdown-menu>
                                <el-dropdown-item
                                style="font-size: 14px; padding: 12px 21px; line-height: 14px"
                                 t @click="toPerson">
                                        个人信息
                                 </el-dropdown-item>
                                <el-dropdown-item 
                                style="font-size: 14px; padding: 12px 21px; line-height: 14px"
                                @click="logout">退出</el-dropdown-item
                                >
                            </el-dropdown-menu>
                    </template>
                </el-dropdown>
        </div>
      
</div>
 
</template>

<script>
	import { mapActions, mapGetters, mapMutations, mapState } from "vuex"
    import bus from 'vue3-eventbus'
import router from "@/router";
    
export default {
    name:'Header',
    props:{
        collapseBtnClass:String,
        collapse:{type:Function}
    },
    data(){
        return {
            user:localStorage.getItem("user") ?
             JSON.parse(localStorage.getItem("user")) : {},
             mUser:localStorage.getItem("mUser") ?
             JSON.parse(localStorage.getItem("mUser")) : {},
        }
    },
    computed: {
        ...mapState('headerAbout',['currentPathName']),
        // ...mapState('personAbout',['mUser']),
        
        
  },
  mounted(){
    //   bus更新头像
      bus.on("updateAvatar",(avatarUrl)=>{
          this.user.avatarUrl = avatarUrl
      })
  },
  created(){
      
  },

  watch: {
    currentPathName(newVal, oldVal){
      //console.log(newVal,oldVal)
    }
  },
  methods:{
    //    ...mapMutations('headerAbout',['setPath']),
    //  ...mapActions('headerAbout',['setPath'])
    logout() {

      // 清空缓存
      localStorage.removeItem("mUser")
      this.$router.push("/login")
      this.$message.success("退出成功")
      // 重置路由
      // resetRouter()
    },
    toPerson() {
      this.$router.push("/merchant")
    }
  },

}
</script>

<style scoped>
/* .example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
} */
</style>